<template>
  <div id="commondity_coupon_edit" :class="[this.fun.getPhoneEnv() == 3?'pcStyle':''] ">
    <c-title :hide="false"
             :text="headTitles"></c-title>
    <div class="content">
      <h1>优惠券</h1>

      <div class="coupon_open">
        <ul class="list">
          <li>
            <span>排序</span>
            <input type="text"
                   placeholder="请输入优惠券排序"
                   v-model="display_order"
                   @blur="clearSrcoll()">
          </li>
          <li>
            <span>名称</span>
            <input type="text"
                   placeholder="请输入优惠券名称"
                   v-model="name"
                   @blur="clearSrcoll()">
          </li>
          <li>
            <span>是否开启</span>
            <van-switch v-model="status"  :active-value="1" :inactive-value="0" active-color="#f15353" inactive-color="#D6D6DC" size="20px"/>
          </li>
        </ul>
      </div>
      <h1>使用条件</h1>

      <div class="coupon_condition">
        <ul class="list">
          <li>
            <span>订单金额</span>
            <input type="text"
                   placeholder="消费满多少金额才可以使用该优惠券"
                   v-model="enough"
                   @blur="clearSrcoll()">
          </li>
          <li class="member-level">
            <span>会员等级</span>
            <div @click="show1=true">{{ chooseVip||'选择会员等级' }}<i class="fa fa-angle-right"></i></div>
          </li>
          <li>
            <span>使用时间限制</span>
            <van-radio-group v-model="time_limit" checked-color="#f15353"  direction="horizontal" >
              <van-radio :name="1">日期</van-radio>
              <van-radio :name="0" style="margin-right: 0;">有效天数</van-radio>
            </van-radio-group>
          </li>
          <li v-if="time_limit===0">
            <span>有效期</span>
            <input type="text"
                   placeholder="0为不限时间"
                   v-model="time_days"
                   @blur="clearSrcoll()">
          </li>
          <li v-if="time_limit===1"
              class="timeLimitOne" @click="taponew = true">
            <span>开始时间</span>
            <div class="right">{{time_start}}</div>
            <i class="fa fa-angle-right"></i>
          </li>
          <li v-if="time_limit===1" @click="taptwow = true"
              class="timeLimitTwo">
            <span>结束时间</span>
            <div class="right">{{time_end}}</div>
            <i class="fa fa-angle-right"></i>
          </li>
          <li>
            <span>使用方式</span>
            <div @click="isComplexShow=true">{{ is_complex==0?'单张使用':'多张一起使用' }}<i class="fa fa-angle-right"></i></div>
          </li>
          <li>
            <span>优惠方式</span>
            <van-radio-group v-model="coupon_method" checked-color="#f15353"  direction="horizontal" >
              <van-radio :name="1">立减</van-radio>
              <van-radio :name="2"  style="margin-right: 0;">打折</van-radio>
            </van-radio-group>
          </li>
          <li
              v-if="coupon_method===1">
              <span>立减</span>
              <input type="text"
                     placeholder="请输入金额"
                     v-model="deduct"
                     @blur="clearSrcoll()"><template v-if="deduct">元</template>
          </li>
          <li
              v-if="coupon_method===2">
              <span>打折</span>
              <input type="text"
                     placeholder="请输入范围"
                     v-model="discount"
                     @blur="clearSrcoll()"><template v-if="discount">折</template>
          </li>
          <li>
            <span>使用范围</span>
            <div @click="useRangeShow=true">{{ use_type==5?'全类适用':use_type==1?'指定分类适用':'指定商品' }}<i class="fa fa-angle-right"></i></div>
          </li>
          <li class="range">
            <button type="button"
                v-if="use_type==1&&(Id==='abc'&&fenleirange.length==0||Id!=='abc'&&category.length==0)"
                    @click="inniClassify()">
              <i class="iconfont icon-life-game-plus"></i>添加分类
            </button>
            <button type="button"
                    v-if="use_type==2&&(Id==='abc'&&goodsrange.length==0||Id!=='abc'&&goods.length==0)"
                    @click="inniGoods()">
              <i class="iconfont icon-life-game-plus"></i>添加商品
            </button>
          </li>
          <li class="fenleisort"  v-if="use_type==1&&(fenleirange.length>0&&Id=='abc'||category.length>0&&Id!=='abc')">
            <div class="goodssort-title" @click="inniClassify()">添加的分类</div>
            <div class="item">
              <template v-if="Id=='abc'">
                <p v-for="(item,index) in fenleirange" :key="index">
                  <span class="name">{{item.name}}</span>
                  <i class="iconfont icon-fontclass-shanchu" @click="classifyDelete(item)"></i>
                </p>
              </template>
              <template v-else>
                <p v-for="(item,index) in category" :key="index">
                  <span class="name">{{item.name}}</span>
                  <i class="iconfont icon-fontclass-shanchu" @click="classifyDelete(item)"></i>
                </p>
              </template>
            </div>
          </li>
          <li class="goodssort"
              v-if="use_type===2&&(goodsrange.length>0&&Id==='abc'||goods.length>0&&Id!='abc')">
            <div class="goodssort-title" @click="inniGoods()">添加的商品</div>
            <div class="item">
              <template v-if="Id==='abc'">
                <p v-for="(item,index) in goodsrange" :key="index">
                  <span class="name">{{item.title}}</span>
                  <i class="iconfont icon-fontclass-shanchu" @click="goodsDDelete(item)"></i>
                </p>
              </template>
              <template v-else>
                <p v-for="(item,index) in goods"   :key="index">
                  <span class="name">{{item.title}}</span>
                  <i class="iconfont icon-fontclass-shanchu" @click="goodsDDelete(item)"></i>
                </p>
              </template>
            </div>
          </li>
        </ul>
      </div>
      <h1>领取发放</h1>

      <div class="coupon_receive">
        <ul class="list">
          <li>
            <span>可否领取</span>
              <van-radio-group v-model="get_type" direction="horizontal" checked-color="#f15353">
                <van-radio :name="1">可以</van-radio>
                <van-radio :name="0"  style="margin-right: 0;">不可以</van-radio>
              </van-radio-group>
          </li>
          <li v-if="get_type===1">
            <span>限领张数</span>
            <input type="text" style="text-align: right;"
                   placeholder="请输入领取数值"
                   v-model="get_max"
                   @blur="clearSrcoll()">
          </li>
          <li>
            <span>发放总数</span>
            <input type="text" style="text-align: right;"
                   placeholder="1"
                   v-model="total"
                   @blur="clearSrcoll()">
          </li>
          <li>
            <span>每人每日限领</span>
            <input type="text" style="text-align: right;"
                   placeholder=""
                   v-model="onceTotal"
                   @blur="clearSrcoll()">
          </li>
        </ul>
      </div>
    </div>
    <div id="btn">
      <button type="button"  v-if="Id==='abc'" @click="publishInfo()">确认发布</button>
      <button type="button"  v-else @click="editInfo()">确认编辑</button>
    </div>
    <van-popup v-model="taponew" position="bottom" :style="{ width: '100vw' }" >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择完整时间"
        :min-date="minDate"
        @cancel="taponew = false"
				@confirm="taponewSet"
      />
    </van-popup>
    <van-popup v-model="taptwow" position="bottom" :style="{ width: '100vw' }" >
      <van-datetime-picker
        v-model="currentDate2"
        type="date"
        title="选择完整时间"
        :min-date="minDate"
        @cancel="taptwow = false"
				@confirm="taptwowSet"
      />
    </van-popup>
    <van-popup v-model="useRangeShow"   closeable round position="bottom" :style="{ height: '50%' }" >
      <div class="popup-title">使用范围</div>
      <van-cell-group :border="false">
        <van-cell @click="use_change(5)" title-class="custom-title-left">
          <template #title>
            <span>全类适用</span>
          </template>
          <template #right-icon v-if="use_type==5">
            <van-icon name="success" color="#F84949" />
          </template>
         </van-cell>
        <van-cell @click="use_change(1)"  title-class="custom-title-left">
          <template #title>
            <span>指定分类适用</span>
          </template>
          <template #right-icon v-if="use_type==1">
            <van-icon name="success" color="#F84949" />
          </template>
         </van-cell>
        <van-cell @click="use_change(2)" title-class="custom-title-left">
          <template #title>
            <span>指定商品</span>
          </template>
          <template #right-icon v-if="use_type==2">
            <van-icon name="success" color="#F84949" />
          </template>
         </van-cell>
      </van-cell-group>
    </van-popup>
    <van-popup v-model="isComplexShow"   closeable round position="bottom" :style="{ height: '50%' }" >
      <div class="popup-title">使用方式</div>
      <van-cell-group :border="false">
        <van-cell @click="use_change(0,'is_complex')" title-class="custom-title-left">
          <template #title>
            <span>单张使用</span>
          </template>
          <template #right-icon v-if="is_complex==0">
            <van-icon name="success" color="#F84949" />
          </template>
         </van-cell>
        <van-cell @click="use_change(1,'is_complex')"  title-class="custom-title-left">
          <template #title>
            <span>多张一起使用</span>
          </template>
          <template #right-icon v-if="is_complex==1">
            <van-icon name="success" color="#F84949" />
          </template>
         </van-cell>
      </van-cell-group>
    </van-popup>
    <van-popup v-model="show3"   closeable round position="bottom" :style="{ height: '50%' }" >
      <div class="popup-title">添加商品</div>
      <div class="popup-search">
        <van-search v-model="goodsKeyword" shape="round" placeholder="搜索商品标题" style="flex:1;" />
        <span @click="goodsousuo()">搜索</span>
      </div>
      <div class="popup-checkbox">
        <van-checkbox-group v-model="goodsSelect" @change="change_goods('shop')">
          <van-cell-group :border="false">
            <van-cell
            v-for="(item,index) in goodsSousuo"
              clickable
              :key="item"
              @click="toggle(index)"
              title-class="custom-title-left"
            >
            <template #title>
              <span>{{item.title}}</span>
            </template>
              <template #right-icon>
                <van-checkbox :name="item" ref="checkboxes" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>

      </div>
    </van-popup>
    <van-popup v-model="show2"   closeable round position="bottom" :style="{ height: '50%' }" >
      <div class="popup-title">添加分类</div>
      <div class="popup-search">
        <van-search v-model="keyword" shape="round" placeholder="搜索分类标题" style="flex:1;" />
        <span @click="ClassifySousuo()">搜索</span>
      </div>
      <div class="popup-checkbox">
        <van-checkbox-group v-model="fenleiSelect" @change="change_goods('category')">
          <van-cell-group :border="false">
            <van-cell
            v-for="(item,index) in sousuoInfo"
              clickable
              :key="item"
              @click="toggle_c(index)"
              title-class="custom-title-left"
            >
            <template #title>
              <span>{{item.name}}</span>
            </template>
              <template #right-icon>
                <van-checkbox :name="item" ref="checkboxes_c" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>

      </div>
    </van-popup>
    <van-popup v-model="show1"   closeable round position="bottom" :style="{ height: '50%' }" >
      <div class="popup-title">选择会员等级</div>
        <van-cell-group :border="false">
          <van-cell title-class="custom-title-left" @click="member_change(-1)">
          <template #title>
            <span>所有会员</span>
          </template>
            <template #right-icon v-if="level_limit==-1">
              <van-icon name="success" color="#F84949" />
            </template>
          </van-cell>
          <van-cell
          v-for="(item,index) in Vip"
            clickable
            :key="item"
            @click="member_change(item.id)"
            title-class="custom-title-left"
          >
          <template #title>
            <span>{{item.level_name}}</span>
          </template>
          <template #right-icon v-if="level_limit==item.id">
            <van-icon name="success" color="#F84949" />
          </template>
          </van-cell>
        </van-cell-group>
    </van-popup>

  </div>
</template>

<script>
import edit_controller from "./edit_controller";

export default edit_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .popup-checkbox .van-checkbox__icon .van-icon {
  border: none;
}
::v-deep .van-checkbox__icon--checked .van-icon {
  color:#F84949;
  background-color: transparent;
  border-color: transparent;
}
 ::v-deep .van-popup__close-icon{
  font-size: 1rem !important;
}
#commondity_coupon_edit {
  overflow: scroll;
  -webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */
  .popup-search{
    display: flex;
    align-items: center;
    span{
      flex-shrink: 0;
      margin-left: 0.375rem;
      margin-right: .75rem;
      font-size: 0.9375rem;
      font-weight: 600;
      color: #333333;
    }
  }

  .custom-title-left{
    text-align: left;
  }
  .popup-title{
    color: #2C2C2C;
    font-size: 0.9375rem;
    text-align: center;
    width: 100%;
    margin-top: 1.5rem ;
    margin-bottom: 0.75rem;
  }
  h1 {
    font-size: 1rem;
    line-height: 1.875rem;
    text-align: left;
    margin-left: 0.75rem;
    margin-top: 0.75rem;
  }
  .content {
    .coupon_open,.coupon_condition,.coupon_receive{
      background: #fff;
      padding: 1.25rem 0.75rem ;
      margin: 0.75rem;
      border-radius: 0.625rem;
    }
    .coupon_open {

      .list {
        li:last-child{
          margin-bottom: 0;
        }
        li {
          display: flex;
          align-items:center;
          justify-content: space-between;
          height: 1rem;
          line-height: 1rem;
          font-size: 15px;
          margin-bottom: 1.25rem;

          span {
            width: 6.25rem;
            text-align: left;
            font-size: 1rem;
            color: #00001C;
            font-weight: 400;
          }

          input {
            border: none;
            text-align: right;
            width: 15rem;
            font-size: 0.875rem;
          }
        }
      }
    }

    .coupon_condition {

      .list {

        .timeLimitOne {
          position: relative;
        }

        .timeLimitTwo {
          position: relative;
        }

        .member-level {
          position: relative;
        }

        li:last-child{
          margin-bottom: 0;
        }
        li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          line-height: 1;
          margin-bottom: 1.25rem;
          font-size: 15px;

          span {
            width: 6.25rem;
            text-align: left;
            font-size: 1rem;
            color: #00001C;
            font-weight: 400;
          }

          input {
            border: none;
            width: 15rem;
            text-align: right;
            font-size: 0.875rem;
          }

          .fa {
            // position: absolute;
            // right: 0.875rem;
            color: #c9c9c9;
            margin-left: 0.3125rem;
            font-size: 18px;
            line-height: 2.5rem;
          }
        }

        .sum {
          align-items: center;
          justify-content: flex-end;

          .box {
            width: 15rem;
            height: 1.875rem;
            background: #f5f5f5;
            border: solid 0.0625rem #ebebeb;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0.625rem;
            border-radius: 0.25rem;

            input {
              height: 1.75rem;
              width: 8.75rem;
              background: #fff;
              padding: 0 0.625rem;
              border-left: solid 0.0625rem #ebebeb;
              border-right: solid 0.0625rem #ebebeb;
            }
          }
        }

        .range {
          align-items: center;

          button {
            width: 100%;
            height: 2.5rem;
            justify-content: center;
            align-items: center;
            border: none;
            border-radius: 0.3125rem;
            color: #F15353;
            display: flex;
            border:1px solid #F15353;

            i {
              font-size: 1rem;
              color: #F15353;
              margin-right: 0.25rem;
            }
          }
        }


        .goodssort,.fenleisort  {
          display: flex;
          align-items: center;
          flex-direction: column;
          background-color: #F5F5F5;
          border-radius: 0.3125rem;
          margin-top: 10px;
          .goodssort-title{
            position: relative;
            font-size: 0.8125rem;
            text-align: center;
            margin-top: 0.8438rem;
            color: #F15353;
          }
          .goodssort-title::after{
            content:"+";
            position: absolute;
            left: -1.3rem;
            top: -0.35rem;
            font-size: 1.4rem;
          }

          .item {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            p:last-child{
              border-bottom: unset;
            }

            p {
              width: 100%;
              color: #333333;
              display: flex;
              align-items: center;
              justify-content: space-between;
              border-radius: 0.25rem;
              border-bottom: 1px solid #E7E7E7;
               margin: 0.75rem 0.75rem 0;
               line-height: 1;
               padding-bottom: 1.0625rem;
              .name {
                font-size: 0.875rem;
                width: 180px;
                text-align: left;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
          }
        }
      }
    }

    .coupon_receive {
      .list {
        li:last-child{
          margin-bottom: 0;
        }
        li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          line-height: 1;
          font-size: 15px;
          margin-bottom: 1.25rem;

          span {
            width: 6.25rem;
            text-align: left;
            font-size: 1rem;
            color: #00001C;
            font-weight: 400;
          }

          input {
            border: none;
            width: 15rem;
          }
        }
      }
    }
  }

  .member_list_popup {
    background: #fff;
    padding-top: 3.125rem;
    width: 100%;

    .title {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 3.125rem;
      line-height: 3.125rem;
      text-align: center;
      font-size: 16px;
      display: flex;
      justify-content: center;
      border-bottom: solid 0.0625rem #ebebeb;

      i {
        position: absolute;
        right: 0.625rem;
        font-size: 1rem;
        color: #c9c9c9;
      }
    }

    .list {
      padding-left: 0.875rem;

      li {
        line-height: 2.875rem;
        text-align: left;
        border-bottom: solid 0.0625rem #ebebeb;
        font-size: 15px;
      }
    }
  }

  #btn {
    background-color: #fff;
    width: 100%;
    padding: 0.2813rem 0.75rem;

    button {
      height: 2.5rem;
      line-height: 2.5rem;
      border-radius: 0.1875rem;
      width: 100%;
      color: #fff;
      font-size: 0.9375rem;
      border: none;
      background-color: #f15353;
      border-radius: 1.25rem;
    }
  }

  .select_box {
    background: #fff;
    width: 100%;
    padding-bottom: 60px;

    .title {
      width: 100%;
      height: 3.125rem;
      line-height: 3.125rem;
      text-align: center;
      font-size: 16px;
      display: flex;
      justify-content: center;
      border-bottom: solid 0.0625rem #ebebeb;

      i {
        position: absolute;
        right: 0.625rem;
        font-size: 1rem;
        color: #c9c9c9;
      }
    }

    .list {
      position: fixed;
      left: 0;
      top: 3.5rem;
      bottom: 3.7rem;
      width: 100%;
      overflow: scroll;

      .van-checkbox-group {
        .van-checkbox {
          padding-left: 20px;
          line-height: 2.875rem;
          border-bottom: solid 0.0625rem #ebebeb;
          font-size: 15px;
          width: 100%;
          text-align: left;
        }
      }

      // .van-radio-group .van-radio:last-child {
      //   border-bottom: none;
      // }

      // .van-radio-group {
      //   width: 100%;

      //   .van-radio {
      //     padding-left: 20px;
      //     line-height: 2.875rem;
      //     border-bottom: solid 0.0625rem #ebebeb;
      //     font-size: 15px;
      //     width: 100%;
      //   }
      // }
    }

    .select_btn {
      background-color: #fff;
      position: absolute;
      width: 100%;
      padding: 0.375rem 0.875rem;
      bottom: 0;
      border-top: solid 0.0625rem #ebebeb;

      button {
        margin: 0 auto;
        width: 100%;
        height: 2.5rem;
        background: #f15353;
        border-radius: 0.1875rem;
        color: #fff;
        border: none;
        font-size: 16px;
      }
    }
  }

  .selectBox {
    width: 100%;
    padding-bottom: 60px;

    .title {
      width: 100%;
      height: 3.125rem;
      line-height: 3.125rem;
      text-align: center;
      font-size: 16px;
      display: flex;
      justify-content: center;
      border-bottom: solid 0.0625rem #ebebeb;

      i {
        position: absolute;
        right: 0.625rem;
        font-size: 1rem;
        color: #c9c9c9;
      }
    }

    .list {
      position: fixed;
      left: 0;
      top: 6.5rem;
      bottom: 3.7rem;
      width: 100%;
      overflow: scroll;

      .van-checkbox-group {
        width: 100%;

        .van-checkbox {
          padding-left: 20px;
          line-height: 2.875rem;
          border-bottom: solid 0.0625rem #ebebeb;
          font-size: 15px;
          width: 100%;
          text-align: left;
        }
      }

      // .van-checkbox-group .van-checkbox:last-child {
      //   border-bottom: none;
      // }

      // .van-radio-group {
      //   width: 100%;

      //   .van-radio {
      //     padding-left: 20px;
      //     line-height: 2.875rem;
      //     border-bottom: solid 0.0625rem #ebebeb;
      //     font-size: 15px;
      //     width: 100%;
      //   }
      // }
    }

    .select_btn {
      background-color: #fff;
      position: absolute;
      width: 100%;
      height: 3.2rem;
      padding: 0.375rem 0.875rem;
      bottom: 0;
      border-top: solid 0.0625rem #ebebeb;

      button {
        margin: 0 auto;
        width: 100%;
        height: 2.5rem;
        background: #f15353;
        border-radius: 0.1875rem;
        color: #fff;
        border: none;
        font-size: 16px;
      }
    }

    .input {
      background-color: #fff;
      height: 2.5rem;
      width: 100%;
      display: flex;
      align-items: center;
      padding-left: 20px;
      margin-top: 15px;

      .classify {
        width: 80%;
        height: 30px;
        border: solid 1px #ccc;
        border-radius: 3px;
        display: inline-block;
        overflow: hidden;

        .sousuo {
          padding-left: 20px;
          border: none;
          height: 30px;
          width: 100%;
        }
      }

      .classify_span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 30px;
        background-color: whitesmoke;
        border-radius: 3px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }

  .fenlei {
    position: absolute;
    top: 0;
    // // margin-top: 40px;
    // bottom:0!important;
    width: 100%;
    z-index: 9999;
  }
}

#commondity_coupon_edit.pcStyle .fenlei {
  width: 375px;
}
</style>
